<template>
	<view>
		<!-- 头部搜索 -->
		<view class="xm-flex-r xm-padding-20r xm-align-content-center" style="">

			<input type="text" value="" placeholder="再此输入搜索内容" style="flex: 1; border: 6rpx #4CD964 solid;border-radius: 40rpx 0rpx 0rpx 40rpx;height: 60rpx;padding-left: 20rpx;"/>
			<view class="" style="border: #4CD964 6rpx solid;margin-left: 10rpx;width: 85rpx;text-align: center;height: 60rpx;line-height: 60rpx;border-radius:  0rpx 40rpx 40rpx 0rpx ;">
				搜索 
			</view>
		</view>
		
		<swiper :indicator-dots="true" active-class="selectitem" @change="onchange" :autoplay="true" :interval="3000" :duration="1000" previous-margin="36rpx" next-margin="36rpx" style="height: 272rpx;display: flex;align-items: center;">
			<swiper-item v-for="(item,value) in [1,2,3,4]" :key="value">
				<view :class="[value != typeswp?'swiper-item':'selectitem']">
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fbaf5aa31066a3ea3325f0471be1aa24c2f5770c84dc31-qcs08z_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637753986&t=23d7b8900a930364c4876096c79671ef" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="xm-fontsize-30 xm-black xm-padding-30r">
			所有服务
		</view>
		
		<view class="xm-grid-c5fr" style="text-align: center;grid-row-gap: 20rpx;">
			
			<view class="xm-flex-c xm-align-content-center xm-justify-center" v-for="(item,value) in [1,2,3,4,5,6,7,1,2,3]" :key="value" style="">
				<view class="xm-brr-20rpx" style="margin: auto; background-color: #007AFF;width: 120rpx;height: 120rpx;">
					<!-- <image src="../../static/images/baricon/select_as.png" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image> -->
				</view>
				<view class="xm-fontsize-20">
					学习
				</view>
			</view>
		
		</view>
		
		<view class="xm-fontsize-30 xm-black xm-padding-30r">
			热门主题
		</view>
		
		<view class="xm-grid-c2fr" style="text-align: left;grid-row-gap: 20rpx;">
			
			<view class="xm-flex-c xm-align-content-center xm-justify-center" v-for="(item,value) in [1,2,3,4]" :key="value" style="">
				<view class="xm-brr-20rpx" style="margin: auto; background-color: #007AFF;width: 341rpx;height: 156rpx;">
					<!-- <image src="../../static/images/baricon/select_as.png" mode="" style="width: 100%;height: 100%;border-radius: 20rpx;"></image> -->
				</view>
				<view class="xm-fontsize-20 xm-padding-20r">
					学习
				</view>
			</view>
		
		</view>
		
		<view class="xm-fontsize-30 xm-black xm-padding-30r">
			新闻专栏
		</view>
		
		<view class="xm-grid xm-padding-30r" style="padding-top: initial;padding-bottom: initial;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr;text-align: center;box-sizing: border-box;">
			<view :class="[nswstoptype==value?'select-newstop xm-fontsize-25':'xm-fontsize-25']" style="width: 100%;height: 41rpx;line-height: 41rpx;" v-for="(item,value) in newstop" :key="value" @click="setnewstop(value)">
				{{item}}
			</view>
		</view>
		
		<view class="xm-padding-30r xm-flex-c" style="">
			
			<!-- 新闻列表 -->
			<view class="xm-flex-r xm-padding-20r" style="width: 100%;height: 210rpx;background-color: #d3d3d3;margin-bottom: 20rpx;" v-for="i in [1,2,3,4,5]">
				<view class="" style="width: 150rpx;height: 150rpx;background-color: #007AFF;border-radius: 20rpx;margin-right: 20rpx;">
					<!-- <image src="" style="width: 100%;height: 100%;border-radius: 20rpx;" mode=""></image> -->
				</view>
				<view class="xm-flex-c xm-justify-around" style="flex: 1;">
					<view class="xm-flex-r xm-justify-between xm-align-content-center">
						<view class="xm-fontsize-20 xm-black">
							标题
						</view>
						<view class="xm-fontsize-15" style="color: #6a757a;">
							2021 02 23
						</view>
					</view>
					
					<!-- 详情 -->
					<view class="">
						xxxxxxxxxxxxxxxxxxxxxx
					</view>
					
					<view class="xm-flex-rr">
						<view class="xm-flex-r" style="margin-left: 10rpx;">
							<image src="../../static/images/baricon/comment.png" mode="widthFix" style="width: 40rpx;"></image>
							<text class="xm-fontsize-15" style="margin-left: 10rpx; color: #6a757a;">200</text>
						</view>
						<!-- <view class="xm-flex-r" style="margin-left: 10rpx;">
							<image src="../../static/images/baricon/comment.png" mode="widthFix" style="width: 40rpx;"></image>
							<text class="xm-fontsize-15" style="margin-left: 10rpx; color: #6a757a;">200</text>
						</view> -->
					</view>
					
				</view>
			</view>
		</view>
		
		
	</view>   
</template>

<script>
	export default {
		data() {
			return {
				typeswp:0,
				newstop:["全部","最近","八卦","政治","体育","美食","旅游"],
				nswstoptype:0
			}
		},
		methods: {
			onchange(data){
				// console.log(data);
				this.typeswp=data.detail.current
			},
			setnewstop(data){
				this.nswstoptype=data
			}
		}
	}
</script>

<style>
	.swiper-item{
		background-color: #007AFF;
		/* padding: 20rpx; */
		border-radius: 20rpx;
		margin: auto;
		height: 224rpx;
		/* margin-right: 20rpx; */
		margin-top: 24rpx;
		box-sizing: border-box;
	}
	.selectitem{
		background-color: #4CD964;
		margin-right: 20rpx;
		border-radius: 20rpx;
		height: 100%;
		margin-right: 20rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
	}
	.select-newstop{
		border-radius: 20rpx;
		border: 1rpx #007AFF solid;
	}
</style>
